<template>
	<view class="peak-valley-time-setting">
		<site-basic-cell :name="siteName">
			<template #after>
				<up-button class="add-button" type="primary" @tap="handleAdd">
					{{$t('peak-valley-time-setting.add.btn')}}</up-button>
			</template>
		</site-basic-cell>
		<view class="tips">
			<text class="tips-label">
				{{$t('peak-valley-time-setting.tips-1')}}
			</text>
			<text class="tips-label">
				{{$t('peak-valley-time-setting.tips-2')}}
			</text>
		</view>
		<view class="time-list">
			<template v-for="(item, index) in dataSource" :key="item.name">
				<view class="time-slot">
					<peak-valley-time-setting-item :disbaleTimeArea="disbaleTimeArea"
						:name="i18Replace($t('peak-valley-time-setting.item.name'), { num: index +1 })"
						v-model="dataSource[index]" @remove="handleRemove(index)"></peak-valley-time-setting-item>
				</view>
			</template>
		</view>

		<publish-footer :beforePublish="beforePublish" @publish="handlePublish"></publish-footer>
	</view>
</template>

<script setup>
	import {
		computed,
		ref,
		watch
	} from 'vue';

	import {
		onLoad
	} from "@dcloudio/uni-app";
	import apis from "@/apis/index.js";
	import {
		setPriorityPeriod,
		selectPriorityPeriod
	} from '@/apis/components/siteSet';
	import {
		useI18n
	} from "vue-i18n";
	import {
		i18Replace
	} from '../../utils/functions';
	import dayjs from 'dayjs';

	const {
		t
	} = useI18n();

	const siteName = ref(null);
	const siteId = ref(null);
	onLoad(({
		name,
		id
	}) => {
		siteName.value = name;
		siteId.value = id;
	})

	const dataSource = ref([{
		startDate: dayjs().format('YYYY-MM-DD'),
		startTime: '',
		endTime: '',
		periodType: '',
		controlPower: '',
	}]);

	const disbaleTimeArea = computed(() => {
		const temp = dataSource.value.filter(item => item.startTime && item.endTime).map(item => ({
			start: item.startTime,
			end: item.endTime
		}));
		return temp;
	})

	const handleAdd = () => {
		const message = verifyFields();
		if (message) {
			uni.showToast({
				icon: 'none',
				title: message
			})
			return;
		}
		dataSource.value.push({
			startDate: dayjs().format('YYYY-MM-DD'),
			startTime: '',
			endTime: '',
			periodType: '',
			controlPower: ''
		})
	}

	const handleRemove = (index) => {
		dataSource.value.splice(index, 1);
	}

	const verifyFields = () => {
		for (var index = 0; index < dataSource.value.length; index++) {
			var element = dataSource.value[index];
			if (!element.startTime) {
				return t('peak-valley-time-setting.item.warn-1');
			} else if (!element.endTime) {
				return t('peak-valley-time-setting.item.warn-2');
			} else if (element.endTime < element.startTime) {
				return t('peak-valley-time-setting.item.warn-3');
			} else if (!element.periodType) {
				return t('peak-valley-time-setting.item.warn-4');
			} else if (!element.controlPower) {
				return t('peak-valley-time-setting.item.warn-5');
			}
		}
		return null;
	}
	const beforePublish = () => {
		const message = verifyFields();
		if (message) {
			uni.showToast({
				icon: 'none',
				title: message
			})
			return false;
		}
		return true;
	}
	const handlePublish = async () => {
		try {
			const list = dataSource.value.map(item => ({
				...item,
				siteId: siteId.value
			}))
			console.log(list);
			await setPriorityPeriod(list);
			// uni.navigateBack()
			uni.$u.toast(t('site.parameter.settings.publish.successful'))
		} catch (err) {
			uni.$u.toast(typeof err === "string" ? err : err.message)
		}
	}
	const loadData = async () => {
		const {
			data
		} = await selectPriorityPeriod(siteId.value);
		if (Array.isArray(data) && data.length) {
			dataSource.value = data;
		}
	}

	watch(() => siteId.value, now => {
		if (now) {
			loadData();
		}
	}, {
		immediate: true
	})
</script>

<style lang="scss" scoped>
	.peak-valley-time-setting {
		padding: 24rpx 32rpx;

		.add-button {
			width: 160rpx;
			height: 64rpx;
		}

		.tips {
			margin-top: 24rpx;
			@include flex(column);

			&-label {
				// font-family: Alibaba PuHuiTi 3.0;
				font-size: 24rpx;
				line-height: normal;
				letter-spacing: 0.014499999999999999em;
				color: #FFA200;
			}
		}

		.time-list {
			margin-top: 24rpx;

			.time-slot:not(:last-child) {
				margin-bottom: 24rpx;
			}
		}

	}
</style>